<template>
  <div>
    <!--    <el-input style="width: 200px; margin: 0 10px" placeholder="请输入菜单名" suffix-icon="el-icon-search"-->
    <!--              v-model="name"/>-->

    <!--    <el-button type="primary" @click="search">搜索</el-button>-->
    <!--    <div>-->
    <!--      <el-button type="primary" style="margin: 10px" @click="dialogFormVisible = true">新增<i-->
    <!--          class="el-icon-circle-plus"></i></el-button>-->
    <!--      &lt;!&ndash;      <el-button type="danger" style="margin: 10px" @click="handleDelBatch">批量删除<i&ndash;&gt;-->
    <!--      &lt;!&ndash;          class="el-icon-remove-outline"></i></el-button>&ndash;&gt;-->

    <!--    </div>-->

    <!--    <el-dialog title="添加单位" :visible.sync="dialogFormVisible">-->
    <!--      <el-form :model="form">-->
    <!--        <el-form-item label="菜单名" :label-width="formLabelWidth">-->
    <!--          <el-input v-model="form.name" autocomplete="off"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="菜单path" :label-width="formLabelWidth">-->
    <!--          <el-input v-model="form.path" autocomplete="off"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="序号" :label-width="formLabelWidth">-->
    <!--          <el-input v-model="form.xh" autocomplete="off"></el-input>-->
    <!--        </el-form-item>-->

    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="dialogFormVisible = false">取 消</el-button>-->
    <!--        <el-button type="primary" @click="handleSave">确 定</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->


    <el-dialog title="添加单位" :visible.sync="addChildDwFormVisible">
      <el-form :model="childForm" :rules="childFormRules" ref="childForm">
        <el-form-item label="单位名称" :label-width="formLabelWidth" prop="dwname">
          <el-input v-model="childForm.dwname" autocomplete="off"></el-input>
        </el-form-item>
        <!--        <el-form-item label="菜单path" :label-width="formLabelWidth">-->
        <!--          <el-input v-model="childForm.path" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="单位级别" :label-width="formLabelWidth" prop="dwjb">
          <el-input v-model="childForm.dwjb" autocomplete="off"></el-input>三位，第一位代表级别，后两位代表排序
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addChildDwFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addChildDw()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改单位" :visible.sync="editDwFormVisible">
      <el-form :model="editForm" :rules="editFormRules" ref="editForm">
        <el-form-item label="单位名称" :label-width="formLabelWidth" prop="dwname">
          <el-input v-model="editForm.dwname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位级别" :label-width="formLabelWidth" prop="dwjb">
          <el-input v-model="editForm.dwjb" autocomplete="off"></el-input>三位，第一位代表级别，后两位代表排序
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDwFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit()">确 定</el-button>
      </div>
    </el-dialog>

    <el-table
        :data="tableData"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"

        style="margin: 10px; width: 1600px" border stripe>
      <el-table-column label="序号" type="index" width="50">
      </el-table-column>
      <el-table-column v-if="false" prop="id" label="ID" width="300">
      </el-table-column>
      <el-table-column prop="dwname" label="单位名称" width="500">
      </el-table-column>
      <el-table-column prop="dwjb" label="级别" width="200">
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="showAddChildDwForm(scope.row)">添加下级单位 <i
              class="el-icon-edit"></i>
          </el-button>
          <!--              <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>-->
          <el-button size="small" type="primary" @click="showEditDwForm(scope.row)">编辑 <i class="el-icon-edit"></i>
          </el-button>
          <el-popconfirm
              style="margin: 0 10px"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="handleDel(scope.row.id)"
          >
            <el-button size="small" type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i>
            </el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="padding: 5px">

      <!--      <el-pagination-->

      <!--          @size-change="handleSizeChange"-->
      <!--          @current-change="handleCurrentChange"-->
      <!--          :current-page="currentPage"-->
      <!--          :page-sizes="[10, 20, 50, 100]"-->
      <!--          :page-size="pageSize"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="total">-->
      <!--      </el-pagination>-->
    </div>
  </div>
</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";

export default {
  created() {
    this.load();
    this.tableData = []
  },
  data() {

    return {
      // tableData: Array(15).fill(item),
      tableData: [],
      pageSize: 10,
      total: 100,
      currentPage: 1,
      name: null,
      path: null,


      dialogFormVisible: false,
      addChildDwFormVisible: false,
      editDwFormVisible: false,
      form: {
        dwname: '',
        dwjb: null
      },
      formRules: {
        dwname: [
          {required: true, message: '请输入单位名称', trigger: 'blur'}],
        dwjb: [
          {required: true, message: '请输入单位级别', trigger: 'blur'},
          {pattern: /^[0-9]*$/, message: '请输入整数', trigger: 'blur'}]
      },

      editForm: {
        id: null,
        dwname: '',
        dwjb: null,
        pid: null,
      },
      editFormRules: {
        dwname: [
          {required: true, message: '请输入单位名称', trigger: 'blur'}],
        dwjb: [
          {required: true, message: '请输入单位级别', trigger: 'blur'},
          {pattern: /^[0-9]*$/, message: '请输入整数', trigger: 'blur'}]
      },
      childForm: {
        dwname: '',
        dwjb: null,
        pid: null,
      },
      childFormRules: {
        dwname: [
          {required: true, message: '请输入单位名称', trigger: 'blur'}],
        dwjb: [
          {required: true, message: '请输入单位级别', trigger: 'blur'},
          {pattern: /^[0-9]*$/, message: '请输入整数', trigger: 'blur'}]
      },
      formLabelWidth: '120px'
    }
  },
  methods: {

    load() {
      service.get('/dw/getAll', {}).then(response => {
            if (response.data.code == 20000) {
              this.tableData = response.data.data
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );
      // service.get('/menu/getpage', {
      //   params: {
      //     pageSize: this.pageSize,
      //     pageNum: this.currentPage,
      //
      //     description: this.description
      //   }
      // }).then(response => {
      //       if (response.data.code == 20000) {
      //         this.tableData = response.data.data.records;
      //         this.total = response.data.data.total;
      //         this.currentPage = response.data.data.current;
      //         this.pageSize = response.data.data.size;
      //       }
      //     },
      //     error => {
      //       ElementUI.Message({
      //         message: error.message,
      //         type: 'error'
      //       })
      //     }
      // );

    },
    showAddChildDwForm(row) {
      this.childForm.pid = row.id
      this.addChildDwFormVisible = true
      this.$nextTick(() => {
        this.$refs['childForm'].clearValidate()
      })
    },
    showEditDwForm(row) {
      this.editForm.id = row.id
      this.editForm.dwname = row.dwname
      this.editForm.dwjb = row.dwjb
      this.editForm.pid = row.pid
      this.editDwFormVisible = true
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
    },
    addChildDw(row) {
      this.$refs['childForm'].validate((valid) => {
        if (!valid) {
          return;
        }
        service.post('/dw', this.childForm).then(response => {
          if (response.data.code == 20000) {
            this.$message.success('success!');
            this.addChildDwFormVisible = false
            this.load()
          } else {
            this.$message.error('添加失败！');
          }

        })
      });

    },
    handleEdit() {
      this.$refs['editForm'].validate((valid) => {
        if (!valid) {
          return;
        }
        service.post('/dw/edit', this.editForm).then(response => {
          if (response.data.code == 20000) {
            this.$message.success('success!');
            this.editDwFormVisible = false
            this.load()
          } else {
            this.editDwFormVisible = false
            this.$message.error('修改失败！');
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      });

    },
    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    }
    ,
    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    }
    ,
    handleSave() {
      service.post('/menu', this.form).then(response => {
        this.$message.success('success!');
        this.dialogFormVisible = false
        this.load()
      })
    }
    ,
    handleDel(id) {
      service.delete('/dw?id=' + id).then(response => {
        if (response.data.code == 20000) {
          this.$message.success('删除成功!');
          this.load()
        } else {
          this.$message.error('删除失败！');
        }
      })
    }
    ,
    search() {
      // if(!this.population.isInteger){  //不能这么判断

      this.currentPage = 1
      this.load()
    }
    ,
    handleDelBatch() {
      console.log(this.$route)
      // console.log(this.$router)
    }
    ,
// validatePopulation(){
//   if(!Number.isInteger(this.population)){
//     this.$message.info('notInteger')
//     this.$message.info(this.population)
//     // this.population = 0
//   }else{
//     this.$message.info('isInteger')
//
//   }


  }
}
</script>

<style scoped>

</style>
